@extends('layout.home')
@section('title', '管理报表')
@section('content')
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }
        tr{
            text-align: center;
        }
        td {
            text-align: center;
            white-space: nowrap; /* 自适应宽度*/
            word-break:  keep-all; /* 避免长单词截断，保持全部 */

        }
        table {
            /*table-layout: fixed;*/
            width: 100%;
            text-align: center;
        }
        th{
            font-size: 14px;
            text-align: center;
        }
        .tablelist{
            border: 1px solid #ccc;
            border-collapse: collapse; /* 边框重叠 */
            width: 100%
        }
        .tablelist th{
            border:1px solid #0058a3;
            color:black;
            font-weight:bold;
            padding-top:4px;
            padding-left:12px;
            padding-right:12px;
        }
        .tablelist td{
            border:1px solid #0058a3;
            padding-top:4px;
            padding-bottom:4px;
            padding-left:10px;
            padding-right:10px;
        }
    </style>
    <div id="header" style="background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center">动态报表展示</div>
    <p style="text-align: center;font-size: 20px;font-weight: bold;color: black;">零件订单完成率(周)</p>
    <div id="main1" style="height:400px;margin-bottom: 20px;margin-left: 5px;"></div>
    <p style="text-align: center;font-size: 20px;font-weight: bold;color: black;">本月完成率</p>
    <table class="tablelist">
        <th>月份</th>
        <th>任务单类型</th>
        <th>完成单数(按期+提前)</th>
        <th>总单数</th>
        <th>完成率</th>
        <tr>
            <td rowspan="10">{{$tabledata[0]->yf}}</td>
        </tr>
        @foreach($tabledata as $v)
        <tr>
            <td>{{$v->rwdlx}}</td>
            <td>{{$v->wcds}}</td>
            <td>{{$v->zds}}</td>
            <td>{{$v->wcl}}%</td>
        </tr>
        @endforeach
{{--        <tr>--}}
{{--            <td rowspan="3">{{$tabledata[0]->yf}}</td>--}}
{{--            <td>{{$tabledata[0]->rwdlx}}</td>--}}
{{--            <td>{{$tabledata[0]->wcds}}</td>--}}
{{--            <td>{{$tabledata[0]->zds}}</td>--}}
{{--            <td>{{$tabledata[0]->wcl}}%</td>--}}
{{--        </tr>--}}
{{--        <tr>--}}
{{--            <td>{{$tabledata[1]->rwdlx}}</td>--}}
{{--            <td>{{$tabledata[1]->wcds}}</td>--}}
{{--            <td>{{$tabledata[1]->zds}}</td>--}}
{{--            <td>{{$tabledata[1]->wcl}}%</td>--}}
{{--        </tr>--}}
{{--        <tr>--}}
{{--            <td>{{$tabledata[2]->rwdlx}}</td>--}}
{{--            <td>{{$tabledata[2]->wcds}}</td>--}}
{{--            <td>{{$tabledata[2]->zds}}</td>--}}
{{--            <td>{{$tabledata[2]->wcl}}%</td>--}}
{{--        </tr>--}}
    </table>
    <link rel="stylesheet" href="{{URL::asset('css/picktime.css')}}">
    <script src="{{URL::asset('js/picktime.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('js/layui.all.js')}}"></script>
    <script>
        function startLoading(){
            $('body').loading({
                loadingWidth:220,
                title:'加载中',
                name:'pageloading',
                titleColor:'#fff',
                discColor:'#EDEEE9',
                discription:'',
                direction:'column',
                type:'origin',
                originBg:'#ECCFBB',
                originDivWidth:40,
                originDivHeight:40,
                originWidth:6,
                originHeight:6,
                smallLoading:false,
                loadingBg:'rgba(56,43,14,0.8)',
                loadingMaskBg:'rgba(66,66,66,0.2)'
            });
        }

        //监听加载状态改变
        document.onreadystatechange = completeLoading;

        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                //removeLoading('pageloading');
                //alert('加载完毕');
                setTimeout(function(){
                    removeLoading('pageloading');
                },1000);
            }else{
                startLoading();
            }
        }


        // ******************************************************

        function showdata() {

            let myChart1 = echarts.init(document.getElementById('main1'));
            window.onresize = myChart1.resize;
            $.get("znzz_rwdwcl",  res => {

                let gcarr = [],kfarr = [],szarr = [],wcz=[];
                let option1 = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        formatter: '第{b0}周<br />{a0}:{c0}%<br />{a1}:{c1}%<br />{a2}:{c2}%',
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['工程', '客服','试制']
                    },
                    grid: {
                        left: '50px',     //设置canvas图距左的距离
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [13,  14, 15,  16,  17,  20]
                    },
                    yAxis: {
                        type: 'value',
                        min: 80,
                        max: 100,
                        splitNumber:10,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    },
                    series: [
                        //工程
                        {
                            name: '工程',
                            type: 'line',
                            data: [11, 11, 88, 13, 12, 13, 10],
                            markLine: {
                                data:[
                                    [
                                        {
                                            name: '基准值：95%',
                                            x: 50,
                                            y: 106
                                        },
                                        {
                                            x: 250,
                                            y: 106
                                        }
                                    ]
                                ]
                            },
                        },
                        //客服
                        {
                            name: '客服',
                            type: 'line',
                            data: [110, 120, 130, 140, 150, 160, 170]

                        },
                        //试制
                        {
                            name: '试制',
                            type: 'line',
                            data: [110, 120, 130, 140, 150, 160, 170]
                        }
                    ]
                };
                res['list1'].forEach(function(value, index, array) {
                    //console.log(value);
                    switch (value.rwdlx) {
                        case '工程':
                            gcarr.push((value.wcl*100).toFixed(2));
                            break;
                        case '客服':
                            kfarr.push((value.wcl*100).toFixed(2));
                            break;
                        case '试制':
                            szarr.push((value.wcl*100).toFixed(2));
                            break;
                    }

                });
                //console.log(res['list2']);
                res['list2'].forEach(function(value, index, array) {
                    wcz.push(value.wcz);
                });

                //console.log(option1.series.markLine.data);

                option1.series[0]['data'] = gcarr;
                option1.series[1]['data'] = kfarr;
                option1.series[2]['data'] = szarr;
                option1.xAxis.data = wcz;

                myChart1.setOption(option1);//柱状图

                //console.log(option1);

            })
        }

        showdata();

    </script>
    <script>


    </script>

    <style>#header {
            background-color: orangered;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            font-family: '黑体'
        }</style>
@endsection
